<template>
    <div class="collect-application">
        <div class="list" v-if="collectAppList">
            <div class="item" v-for="item in collectAppList" :key="item.id">
                <img :src="item.avatar" alt="">
                <span>{{ item.name }}--{{ item.id }}</span>
                <i class="el-icon-star-on" @click="onCollectionApp(item.id)"></i>
            </div>
        </div>
        <div v-else>
            <router-link to="/applicationCenter">暂无收藏,点击跳转应用中心</router-link>
        </div>
    </div>
</template>

<script>
import { listApp } from "@/api/app";
import { getCollection,deleteCollection,addCollection } from "@/api/user";

export default {
    data() {
        return {
            //热门应用
            collectAppList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
        }
    },
    mounted() {
        // this.getCollectListApp();
        this.getCollectionListApp();
    },
    methods: {
        getCollectListApp() {
            listApp(this.queryParams).then(res => {
                this.collectAppList = res.data.records;
            })
        },
        //收藏应用
        getCollectionListApp() {
            getCollection().then(res => {
                this.collectAppList = res.data; 
            })
        },
        isCollected(id) {
           return this.collectAppList.some(item => item.id === id);
        },
        onCollectionApp(id){
            this.$message.closeAll();
            const isCollected = this.isCollected(id);
            if (isCollected) {
                deleteCollection(id).then(res =>{
                    this.$message.success("取消收藏成功");
                    this.getCollectionListApp();
            })
            }else{
                addCollection(id).then(res =>{
                    this.$message.success("收藏成功");
                    this.getCollectionListApp(); 
                })
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.collect-application {
    background-color: white;
    box-shadow: 0 10px rgba(240, 238, 238, 0.5);
    width: 100%;
    padding: 0 10px 0;
    overflow: hidden;
    height: 400px;

    .title {
        text-align: left;
        padding-left: 15px;
        height: 50px;
        line-height: 50px;
        font-weight: bold;
        color: #202020;
        font-size: 20px;
        display: flex;
        background-color: white;

        span:first-child {
            flex: 1;
        }

        span:last-child {
            width: 60px;
            font-weight: normal;
            font-size: 14px;
            color: #aca8a8;
        }
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        margin-top:30px;
        .item {
            width: 15.5%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 15px 0;
            padding: 0 15px;
            box-sizing: border-box;

            @include respond-to('pad') {
                width: 50%;
            }

            img {
                width: 48px;
                height: 48px;
                margin-right: 5px;
            }

            &>span {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            i {
                display: none;
                font-size: 22px;
                color: #ACAEBC;
            }

            &:hover {
                i {
                    display: block;

                    &:hover {
                        color: red;
                    }
                }
            }
        }
    }
}
</style>